<template>
  <div class="vp-raw flex gap-2 flex-wrap">
    <fwb-dropdown
      text="Dropdown"
      :placement="placement"
      close-inside
    >
      <fwb-list-group>
        <fwb-list-group-item
          v-for="i in items"
          :key="i"
        >
          {{ i }}
        </fwb-list-group-item>
      </fwb-list-group>
    </fwb-dropdown>
    <fwb-dropdown
      placement="top"
      text="Top"
    >
      <p class="p-2">
        Dropdown content here
      </p>
    </fwb-dropdown>
    <fwb-dropdown
      placement="right"
      text="Right"
    >
      <p class="p-2">
        Dropdown content here
      </p>
    </fwb-dropdown>
    <fwb-dropdown text="Bottom">
      <p class="p-2">
        Dropdown content here
      </p>
    </fwb-dropdown>
    <fwb-dropdown
      placement="left"
      text="Left"
    >
      <p class="p-2">
        Dropdown content here
      </p>
    </fwb-dropdown>
  </div>
</template>

<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from '../../../../src/index'
import { onUnmounted, ref } from 'vue'

const items = ref([])
const placement = ref('top')

// Click the dropdown to activate it before this timeout ends
const interval = setInterval(() => {
  if (items.value.length > 4) {
    items.value = []
  } else {
    items.value.push('1', '2', '3')
  }
  if (placement.value === 'top') placement.value = 'bottom'
  else if (placement.value === 'bottom') placement.value = 'left'
  else if (placement.value === 'left') placement.value = 'right'
  else placement.value = 'top'
}, 2000)

onUnmounted(() => clearInterval(interval))
</script>